<template>
  <div class="Echarts">
    <el-container>
      <el-header>菜单管理</el-header>
      <el-container>
        <el-aside width="200px">
          <ul>
            <li v-for="item in fenLeiList" @click="getData(item.id)"><a href="#">{{item.name}}</a></li>
          </ul>
        </el-aside>
        <el-main>Main</el-main>
      </el-container>
    </el-container>
    <hr>
    <el-upload
        class="avatar-uploader"
        :headers="{token:token}"
        :action="this.axios.defaults.baseURL+'/product/file/upload'"
        :show-file-list="false"
        :on-success="handleAvatarSuccess">
      <div v-for="file in fileList">
        <img v-if="fileList.length>0" :src="file"  class="avatar"> <buton>删除</buton>
      </div>
      <i v-if="fileList.length<3" class="el-icon-plus avatar-uploader-icon"></i>
    </el-upload>
    <hr>
    <!--最多三张图片-->
    <!--<img :src="file" alt="" v-for="file in fileList">-->
    <input type="file"  @change="upload">
    <hr>
    <select id="selectId" @click="selectChange">
      <option value="1">1</option>
      <option value="2">1</option>
      <option value="3">1</option>
      <option value="4">1</option>
      <option value="5">1</option>
    </select>
    <hr>
    <el-cascader
        v-model="id"
        :options="options"
        :props="{label:'name',value:'id',children:'categoryList'}"
        @change="handleChange"></el-cascader>
    <hr>
    <div id="main" style="width: 600px;height:400px;"></div>
    <button @click="test">测试</button>


  </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
  name: "Echarts",
  data() {
    return {
      fenLeiList:[
        {
          id:1,
          name:'主食'
        },

        {
          id:2,
          name:'甜品'
        }
      ],
      imageUrl: null,
      token: localStorage.getItem("token"),
      fileList: [],
      id: null,
      options: [{
        id: 'zhinan',
        name: '指南',
        children: [{
          id: 'shejiyuanze',
          name: '设计原则',
          children: [{
            id: 'yizhi',
            name: '一致'
          }, {
            id: 'fankui',
            name: '反馈'
          }, {
            id: 'xiaolv',
            name: '效率'
          }, {
            id: 'kekong',
            name: '可控'
          }]
        }, {
          id: 'daohang',
          name: '导航',
          children: [{
            id: 'cexiangdaohang',
            name: '侧向导航'
          }, {
            id: 'dingbudaohang',
            name: '顶部导航'
          }]
        }]
      }, {
        id: 'zujian',
        name: '组件',
        children: [{
          id: 'basic',
          name: 'Basic',
          children: [{
            id: 'layout',
            name: 'Layout 布局'
          }, {
            id: 'color',
            name: 'Color 色彩'
          }, {
            id: 'typography',
            name: 'Typography 字体'
          }, {
            id: 'icon',
            name: 'Icon 图标'
          }, {
            id: 'button',
            name: 'Button 按钮'
          }]
        }, {
          id: 'form',
          name: 'Form',
          children: [{
            id: 'radio',
            name: 'Radio 单选框'
          }, {
            id: 'checkbox',
            name: 'Checkbox 多选框'
          }, {
            id: 'input',
            name: 'Input 输入框'
          }, {
            id: 'input-number',
            name: 'InputNumber 计数器'
          }, {
            id: 'select',
            name: 'Select 选择器'
          }, {
            id: 'cascader',
            name: 'Cascader 级联选择器'
          }, {
            id: 'switch',
            name: 'Switch 开关'
          }, {
            id: 'slider',
            name: 'Slider 滑块'
          }, {
            id: 'time-picker',
            name: 'TimePicker 时间选择器'
          }, {
            id: 'date-picker',
            name: 'DatePicker 日期选择器'
          }, {
            id: 'datetime-picker',
            name: 'DateTimePicker 日期时间选择器'
          }, {
            id: 'upload',
            name: 'Upload 上传'
          }, {
            id: 'rate',
            name: 'Rate 评分'
          }, {
            id: 'form',
            name: 'Form 表单'
          }]
        }, {
          id: 'data',
          name: 'Data',
          children: [{
            id: 'table',
            name: 'Table 表格'
          }, {
            id: 'tag',
            name: 'Tag 标签'
          }, {
            id: 'progress',
            name: 'Progress 进度条'
          }, {
            id: 'tree',
            name: 'Tree 树形控件'
          }, {
            id: 'pagination',
            name: 'Pagination 分页'
          }, {
            id: 'badge',
            name: 'Badge 标记'
          }]
        }, {
          id: 'notice',
          name: 'Notice',
          children: [{
            id: 'alert',
            name: 'Alert 警告'
          }, {
            id: 'loading',
            name: 'Loading 加载'
          }, {
            id: 'message',
            name: 'Message 消息提示'
          }, {
            id: 'message-box',
            name: 'MessageBox 弹框'
          }, {
            id: 'notification',
            name: 'Notification 通知'
          }]
        }, {
          id: 'navigation',
          name: 'Navigation',
          children: [{
            id: 'menu',
            name: 'NavMenu 导航菜单'
          }, {
            id: 'tabs',
            name: 'Tabs 标签页'
          }, {
            id: 'breadcrumb',
            name: 'Breadcrumb 面包屑'
          }, {
            id: 'dropdown',
            name: 'Dropdown 下拉菜单'
          }, {
            id: 'steps',
            name: 'Steps 步骤条'
          }]
        }, {
          id: 'others',
          name: 'Others',
          children: [{
            id: 'dialog',
            name: 'Dialog 对话框'
          }, {
            id: 'tooltip',
            name: 'Tooltip 文字提示'
          }, {
            id: 'popover',
            name: 'Popover 弹出框'
          }, {
            id: 'card',
            name: 'Card 卡片'
          }, {
            id: 'carousel',
            name: 'Carousel 走马灯'
          }, {
            id: 'collapse',
            name: 'Collapse 折叠面板'
          }]
        }]
      }, {
        id: 'ziyuan',
        name: '资源',
        children: [{
          id: 'axure',
          name: 'Axure Components'
        }, {
          id: 'sketch',
          name: 'Sketch Templates'
        }, {
          id: 'jiaohu',
          name: '组件交互文档'
        }]
      }],
      form: {
        cate1Id: null,
        cate2Id: null,
        cate3Id: null,

      }
    };
  },
  methods: {
    getData(id) {
      console.log(id)
    },
    handleAvatarSuccess(res) {
      this.fileList.push(res.data.fileUrl);
    },
    upload(file) {
      console.log("file",file);
    },
    handleChange() {
      console.log(this.id);
      this.form.cate1Id=this.id[0];
      this.form.cate2Id=this.id[1];
      this.form.cate3Id=this.id[2];
    },

    test() {
      this.axios.get('user/user/test').then(res=>{
        this.getOauth2CodeUrl = res.data.msg;
      }).catch(err=>{

      })
    },
    selectChange() {
      let value = document.getElementById("selectId").value;
      console.log(value);
    }


  },
  mounted: function () {


    this.axios.get('product/category/getTreeList').then(res => {
      this.getOauth2CodeUrl = res.data.msg;
    }).catch(err => {

    })
    this.axios.get('product/category/getTreeList1').then(res => {
      this.getOauth2CodeUrl = res.data.msg;
    }).catch(err => {

    })

    this.axios.get('product/category/getTreeList').then(res => {
      this.options = res.data.data;
    }).catch(err => {

    })
    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('main'));
    //绘制图表
    myChart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['衬衫', '羊毛衫', '雪纺衫', '裤子', '高跟鞋', '袜子']
      },
      yAxis: {},
      series: [
        {
          name: '销量',
          type: 'bar',
          data: [5, 20, 36, 10, 10, 20]
        }
      ]
    });
  }

};
</script>

<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.el-header, .el-footer {
  background-color: #B3C0D1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #D3DCE6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #E9EEF3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
}

.el-container:nth-child(5) .el-aside,
.el-container:nth-child(6) .el-aside {
  line-height: 260px;
}

.el-container:nth-child(7) .el-aside {
  line-height: 320px;
}
</style>